<template>
	<view class="groupimg">
		<view class="image-item" v-for="(item,index) in tempimg" :key="index" :style="{width:imgwidth+'rpx', height:imghight+'rpx'}">
			<image :src="item" mode="aspectFill" :style="{width:imgwidth+'rpx', height:imghight+'rpx'}"></image>
			<view class="delete" @click="deleteimg(index)">-</view>
		</view>
		<view class="image-item" @click="addimgae" :style="{width:imgwidth+'rpx', height:imghight+'rpx'}" v-if="tempimg.length<currentnumber">+</view>
	</view>
</template>

<script>
	/**
	 * 图片上传组件
	 */
	//引入图片压缩插件
	export default {
		props: {
			//图片数量
			imgnum: {
				type: Number,
				default: 8,
			},
			//图片高度
			imgwidth: {
				type: Number,
				default: 150,
			},
			//图片宽度
			imghight: {
				type: Number,
				default: 150,
			},

			//图片数组
			imglist: {
				type: Array,
				default () {
					return []
				},
			}
		},
		data() {
			return {
				currentnumber: this.imgnum,
				tempimg: this.imglist,
				compressfission: [],
				// tempimg:[
				// 	'/static/image/pro-pic.png',
				// 	'/static/image/pro-pic.png',
				// 	'/static/image/pro-pic.png',
				// ],
			}
		},

		methods: {
			//传值
			getimgarrs(option) {
				this.tempimg = option;
			},

			//删除图片
			deleteimg(index) {
				this.tempimg.splice(index, 1);
				uni.$emit('getimageArr', this.tempimg);
			},
			//添加图片
			addimgae() {
				let that = this;
				uni.chooseImage({
					count: this.currentnumber - this.tempimg.length, //默认8
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(ImageRes) {
						//图片直接上传
						ImageRes.tempFilePaths.map((item,index)=>{
							// console.log(item);
							that.$Uploadimg(item).then(res=>{
								let imageres = JSON.parse(res)
								 that.tempimg = that.tempimg.concat(imageres.data);
								 uni.$emit('getimageArr', that.tempimg);
							}).catch(err=>{
								console.log(err);
							})
						})
					},
					fail(error) {
						console.log(error)
					}
				})
			},

			//压缩图片上传
			compresseduploadimg(tempFilePaths) {
				let _this = this;
				_this.compressedimg(tempFilePaths).then(res => {
					res.map((item, index) => {
						_this.$Uploadimg(item).then((imagdata) => {
							let imagdatas = JSON.parse(imagdata);
							_this.tempimg = _this.tempimg.concat(imagdatas.data);
							uni.$emit('getimageArr', _this.tempimg);
						}).catch((error) => {
							//异常错误
							_this.$ShowMsg('statusCode：' + error);
						})
					})
				}).catch(err => {
					console.log(err);
				})
			},

			//压缩图片
			compressedimg(tempFilePath) {
				let _thats = this;
				return new Promise((resolve, reject) => {
					tempFilePath.map((item, index) => {
						uni.showLoading({
							title: '图片压缩中...',
							mask: true
						});
						uni.compressImage({
							src: item,
							quality: 80,
							success(res) {
								_thats.compressfission = _thats.compressfission.concat(res.tempFilePath);
							},
							fail(error) {
								uni.hideLoading();
								reject(error);
							},
						})
					})
					setTimeout(() => {
						uni.hideLoading();
						resolve(_thats.compressfission);
					}, 2000);
				})
			}

		}
	}
</script>

<style lang="scss">
	.groupimg {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		margin-top: 20rpx;

		.image-item {
			margin: 15rpx 8rpx;
			width: 150rpx;
			height: 150rpx;
			background-color: #f2f2f2;
			font-size: 50rpx;
			font-weight: normal;
			color: #ababab;
			justify-content: center;
			display: flex;
			align-items: center;
			position: relative;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			.delete {
				z-index: 99;
				position: absolute;
				width: 35rpx;
				font-size: 25rpx;
				color: #fff;
				height: 35rpx;
				top: -10rpx;
				right: -5rpx;
				background-color: #ea5551;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50%;
				font-weight: bold;
			}
		}
	}
</style>
